<!-- android代码生成操作页面 -->
<template>
    <div>
        <!-- 流程 -->
        <el-row style="margin-top: 30px; margin-left: 50px">
            <el-col :span="7">
                <div>
                    <el-steps direction="vertical" :active="active" finish-status="success" space="100px">
                        <el-step title="选择项目路径" v-bind:description=filter.path />
                        <el-step title="页面基本信息" v-bind:description="filter.ClassName + '\n'
                        + filter.pageType + '\n'
                        + filter.isCardView + '\n'
                        + filter.isBoundle + '\n'
                        + filter.isScan + '\n'"/>
                        <el-step title="页面实体" v-bind:description="filter.mainEntityClassName + '\n'
                        + filter.detailEntityClassName + '\n'"/>
                        <el-step title="设置主页面" description="在这里设置你主界面的样式"/>
                        <el-step title="设置CardView页面" description="你想要的你的cardView长什么样子呢?"/>
                        <el-step title="生成代码" description="?"/>
                    </el-steps>
                </div>

            </el-col>
            <el-col :span="12">
                <!-- 1.配置项目路径 -->
                <div v-if="active===0">
                    <el-input placeholder="请输入绝对路径" v-model="filter.path"/>
                </div>

                <!-- 2.页面基本信息 -->
                <div v-if="active===1">
                    <el-form label-width="120px">
                        <el-form-item label="英文(类)名称:">
                            <el-input v-model="filter.ClassName"></el-input>
                        </el-form-item>

                        <el-form-item label="功能名称:">
                            <el-input v-model="filter.projectName"></el-input>
                        </el-form-item>

                        <el-form-item label="页面类型">
                            <el-select v-model="filter.pageType" placeholder="请选择页面类型:">
                                <el-option label="单页面" value="1"></el-option>
                                <el-option label="左右双页面" value="2"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-row v-if="filter.pageType==='2'" :span="24">
                            <el-col :span="12">
                                <el-form-item label="左功能名称">
                                    <el-input v-model="filter.leftProjectName"></el-input>
                                </el-form-item>
                                <el-form-item label="右功能名称">
                                    <el-input v-model="filter.rightProjectName"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="左页面类名称">
                                    <el-input v-model="filter.leftClassName"></el-input>
                                </el-form-item>
                                <el-form-item label="右页面类名称">
                                    <el-input v-model="filter.rightClassName"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <div style="height: 1px; background: #ba8fb7"/>

                        <el-form-item label="包含列表">
                            <el-switch v-model="filter.isCardView"></el-switch>
                        </el-form-item>

                        <div v-if="filter.isCardView">
                            <el-form-item label="列表父页面:">
                                <el-select v-model="filter.cardViewParentClassName" placeholder="请选择列表所在页面:">
                                    <el-option v-if="filter.ClassName != ''" :label="filter.ClassName"
                                               :value="filter.ClassName"></el-option>
                                    <el-option v-if="filter.leftClassName != ''" :label="filter.leftClassName"
                                               :value="filter.leftClassName"></el-option>
                                    <el-option v-if="filter.rightClassName != ''" :label="filter.rightClassName"
                                               :value="filter.rightClassName"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>

                        <div style="height: 1px; background: #ba8fb7"/>

                        <el-form-item label="接收传值">
                            <el-switch v-model="filter.isBoundle"></el-switch>
                        </el-form-item>

                        <div style="height: 1px; background: #ba8fb7"/>

                        <el-form-item label="扫描功能">
                            <el-switch v-model="filter.isScan"></el-switch>
                        </el-form-item>

                        <div v-if="filter.isScan">
                            <el-form-item label="可扫描类型:">
                                <el-checkbox-group v-model="filter.scanType">
                                    <el-checkbox label="唯一码" name="type"></el-checkbox>
                                    <el-checkbox label="单号" name="type"></el-checkbox>
                                    <el-checkbox label="物料号" name="type"></el-checkbox>
                                    <el-checkbox label="其他" name="type"></el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                        </div>

                    </el-form>
                </div>

                <!-- 3.页面实体 -->
                <div v-if="active===2">
                    <!-- 主页面实体 -->
                    <el-form label-width="120px">
                        <el-row :span="24">
                            <el-col :span="12">
                                <el-form-item label="主页面实体">
                                    <el-select v-model="filter.mainEntityType" placeholder="请选择实体类型:">
                                        <el-option label="已存在实体DTO" value="已存在实体DTO"></el-option>
                                        <el-option label="已存在实体Entity" value="已存在实体Entity"></el-option>
                                        <el-option label="新建实体DTO" value="新建实体DTO"></el-option>
                                        <el-option label="新建实体Entity" value="新建实体Entity"></el-option>
                                        <el-option label="页面无实体" value="页面无实体"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" v-if="filter.mainEntityType!='页面无实体'">
                                <el-form-item :label="filter.mainEntityType">
                                    <el-input v-model="filter.mainEntityClassName"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div v-if="filter.mainEntityType === '新建实体DTO' || filter.mainEntityType === '新建实体Entity'">
                            <el-form-item label="SQL语句:">
                                <el-input v-model="mainSQLText"
                                          type="textarea"
                                          :autosize="{ minRows: 2, maxRows: 10}"
                                          placeholder="请粘贴建表语句(只粘贴字段相关代码,每行需以`开头,代码相关注释请删除)"></el-input>
                            </el-form-item>
                            <el-button @click="readMainSQL">解析SQL</el-button>
                            <el-button @click="mainSqlTextClear">清空</el-button>
                            <el-tag v-if="multipleSelectionNum > 0">已添加变量个数:{{multipleSelectionNum}}</el-tag>
                        </div>
                    </el-form>

                    <!-- cardView页面实体 -->
                    <el-form label-width="120px" v-if="filter.isCardView" style="margin-top: 80px">
                        <el-row :span="24">
                            <el-col :span="12">
                                <el-form-item label="CardView实体">
                                    <el-select v-model="filter.detailEntityType" placeholder="请选择实体类型:">
                                        <el-option label="已存在实体DTO" value="已存在实体DTO"></el-option>
                                        <el-option label="已存在实体Entity" value="已存在实体Entity"></el-option>
                                        <el-option label="新建实体DTO" value="新建实体DTO"></el-option>
                                        <el-option label="新建实体Entity" value="新建实体Entity"></el-option>
                                        <el-option label="页面无实体" value="页面无实体"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" v-if="filter.detailEntityType!='页面无实体'">
                                <el-form-item :label="filter.detailEntityType">
                                    <el-input v-model="filter.detailEntityClassName"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div v-if="filter.detailEntityType === '新建实体DTO' || filter.detailEntityType === '新建实体Entity'">
                            <el-form-item label="SQL语句:">
                                <el-input v-model="detailSQLText"
                                          type="textarea"
                                          :autosize="{ minRows: 2, maxRows: 10}"
                                          placeholder="请粘贴建表语句(只粘贴字段相关代码,每行需以`开头,代码相关注释请删除)"></el-input>
                            </el-form-item>
                            <el-button @click="readDetailSQL">解析SQL</el-button>
                            <el-button @click="detailSqlTextClear">清空</el-button>
                            <el-tag v-if="detailMultipleSelectionNum > 0">已添加变量个数:{{detailMultipleSelectionNum}}</el-tag>
                        </div>
                    </el-form>
                </div>

                <!-- 4.主页面设计 -->
                <div v-if="active===3">
                    <!-- 单页面显示 -->
                    <div v-if="filter.pageType==='1'">
                        <template>
                            <el-table :data="filter.mainElement" style="width: 100%" max-height="250">
                                <el-table-column fixed property="elementName" label="变量"/>
                                <el-table-column property="elementType" label="类型" />
                                <el-table-column property="elementComment" label="注释"/>
                                <el-table-column fixed="right" label="操作">
                                    <template slot-scope="scope">
                                        <el-button
                                                @click.native.prevent="deleteRow(scope.$index, filter.mainElement)"
                                                type="text"
                                                size="small"> 移除
                                        </el-button>
                                        <el-button
                                                @click.native.prevent="editRow(scope.$index, filter.mainElement)"
                                                type="text"
                                                size="small"> 编辑
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>


                        </template>
                    </div>
                    <!-- 双页面显示 -->
                    <el-row v-if="filter.pageType==='2'">
                        <el-col :span="12">
                            <template>
                                <el-table :data="filter.leftElement" style="width: 100%" max-height="250">
                                    <el-table-column fixed property="elementName" label="变量"/>
                                    <el-table-column property="elementType" label="类型" />
                                    <el-table-column property="elementComment" label="注释"/>
                                    <el-table-column fixed="right" label="操作">
                                        <template slot-scope="scope">
                                            <el-button
                                                    @click.native.prevent="deleteRow(scope.$index, filter.leftElement)"
                                                    type="text"
                                                    size="small"> 移除
                                            </el-button>
                                            <el-button
                                                    @click.native.prevent="editRow(scope.$index, filter.leftElement)"
                                                    type="text"
                                                    size="small"> 编辑
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </template>
                        </el-col>
                        <el-col :span="12">
                            <template>
                                <el-table :data="filter.rightElement" style="width: 100%" max-height="250">
                                    <el-table-column fixed property="elementName" label="变量"/>
                                    <el-table-column property="elementType" label="类型" />
                                    <el-table-column property="elementComment" label="注释"/>
                                    <el-table-column fixed="right" label="操作">
                                        <template slot-scope="scope">
                                            <el-button
                                                    @click.native.prevent="deleteRow(scope.$index, filter.rightElement)"
                                                    type="text"
                                                    size="small"> 移除
                                            </el-button>
                                            <el-button
                                                    @click.native.prevent="editRow(scope.$index, filter.rightElement)"
                                                    type="text"
                                                    size="small"> 编辑
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </template>
                        </el-col>
                    </el-row>
                    <!-- 操作 -->
                    <div style="align-content: center">
                        <el-button style="margin-top: 20px;" type="info" @click="newElement">新增控件</el-button>
                        <el-tag v-if="filter.pageType==='1'"> 主页面控件数:{{filter.mainElement.length}}</el-tag>
                        <el-tag v-if="filter.pageType==='2'"> 左页面控件数:{{filter.leftElement.length}}</el-tag>
                        <el-tag v-if="filter.pageType==='2'"> 右页面控件数:{{filter.rightElement.length}}</el-tag>
                    </div>
                </div>

                <!-- 5.CardView页面设计 -->
                <div v-if="active===4">
                    <div v-if="filter.isCardView">
                        <template>
                            <el-table :data="filter.cardViewElement" style="width: 100%" max-height="250">
                                <el-table-column fixed property="elementName" label="变量"/>
                                <el-table-column property="elementType" label="类型"/>
                                <el-table-column property="elementComment" label="注释"/>
                                <el-table-column fixed="right" label="操作">
                                    <template slot-scope="scope">
                                        <el-button
                                                @click.native.prevent="deleteRow(scope.$index, filter.cardViewElement)"
                                                type="text"
                                                size="small"> 移除
                                        </el-button>
                                        <el-button
                                                @click.native.prevent="editRow(scope.$index, filter.cardViewElement)"
                                                type="text"
                                                size="small"> 编辑
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                        <!-- 操作 -->
                        <div style="align-content: center">
                            <el-button style="margin-top: 20px;" type="info" @click="newElement">新增控件</el-button>
                            <el-tag> CardView控件数:{{filter.cardViewElement.length}}</el-tag>
                            <el-tag v-if="filter.cardViewParentClassName != ''">cardView所有页面: {{filter.cardViewParentClassName}}</el-tag>
                        </div>
                        <div style="height: 1px; background: #ba8fb7; margin-top: 30px"/>
                        <!-- 颜色区别状态 -->
                        <div style="margin-top: 30px">
                            <el-form>
                                <el-row>
                                    <el-col :span="6">
                                        <el-switch v-model="filter.statusColor" active-text="用颜色来区别状态"></el-switch>
                                    </el-col>
                                    <el-col :span="9" v-if="filter.statusColor">
                                        <!-- 选择实体 -->
                                        <el-form-item label="数据实体:">
                                            <el-select v-model="filter.status.statusEntity" placeholder="请选择数据来源实体">
                                                <el-option v-if="filter.mainEntityClassName != ''" :label=filter.mainEntityClassName
                                                           :value="1"></el-option>
                                                <el-option v-if="filter.detailEntityClassName != ''" :label=filter.detailEntityClassName
                                                           :value="2"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="9" v-if="filter.statusColor">
                                        <!-- 选择实体具体字段 -->
                                        <el-form-item label="具体字段:">
                                            <el-select v-model="filter.status.statusField" placeholder="请选择数据来源">
                                                <!-- 主实体 -->
                                                <div v-if="filter.status.statusEntity === '1'">
                                                    <div v-for="element in filter.multipleSelection" :key=element.num>
                                                        <el-option :label=element.nameEn :value=element></el-option>
                                                    </div>
                                                </div>
                                                <!-- detail实体 -->
                                                <div v-if="filter.status.statusEntity === '2'">
                                                    <div v-for="element in filter.detailMultipleSelection" :key="element.num">
                                                        <el-option :label=element.nameEn :value=element></el-option>
                                                    </div>
                                                </div>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row v-if="filter.statusColor">
                                    <el-col :span="6"/>
                                    <el-col :span="12">
                                        <el-table :data="filter.status.statusTypeAndColor" style="width: 100%" max-height="250">
                                            <el-table-column fixed property="value" :label="filter.status.statusField.nameEn"/>
                                            <el-table-column property="color" label="颜色"/>
                                            <el-table-column fixed="right" label="操作">
                                                <template slot-scope="scope">
                                                    <el-button
                                                            @click.native.prevent="deleteRow(scope.$index, filter.status.statusTypeAndColor)"
                                                            type="text"
                                                            size="small"> 移除
                                                    </el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-button style="margin-top: 20px;" @click="newColorStyle">添加</el-button>
                                        <el-tag> 已绑定数:{{filter.status.statusTypeAndColor.length}}</el-tag>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </div>
                    </div>
                    <div v-if="!filter.isCardView">
                        <el-tag type="danger">你的页面中未设置CardView,请直接进入下一步!</el-tag>
                    </div>

                </div>

                <!-- 6.开始生成代码 -->
                <div v-if="active===5" >
                    <el-tag>项目路径:{{filter.path}}</el-tag>
                    <el-tag>功能类名:{{filter.ClassName}}</el-tag>
                    <el-tag>功能中文名称:{{projectName}}</el-tag>
                    <el-tag>页面类型:{{pageType}}</el-tag>
                    <el-tag>左页面中文名称 {{leftProjectName}}</el-tag>
                    <el-tag>右页面中文名称 {{rightProjectName}}</el-tag>
                    <el-tag>左页面类名称 {{leftClassName}}</el-tag>
                    <el-tag>右页面类名称 {{rightClassName}}</el-tag>
                    <el-tag>包含列表 {{isCardView}}}</el-tag>
                    <el-tag>列表父页面类名 {{cardViewParentClassName}}</el-tag>
                    <el-tag>接收传值 {{isBoundle}}</el-tag>
                    <el-tag>扫描功能 {{isScan}}</el-tag>
                    <el-tag>扫描类型 {{scanType}}</el-tag>
                    <el-tag>主实体类型 {{mainEntityType}}</el-tag>
                    <el-tag>主实体类名 {{mainEntityClassName}}</el-tag>
                    <el-tag>detail实体类型 {{detailEntityType}}</el-tag>
                    <el-tag>detail实体类名 {{detailEntityClassName}}</el-tag>
                    <el-tag>cardView是否用颜色区别状态 {{statusColor}}</el-tag>
<!--                    状态相关-->
<!--                    status: {-->
<!--                        statusEntity: '',-->
<!--                        statusField: {},-->
<!--                        statusTypeAndColor: [],-->
<!--                    },-->
<!--                    主SQL选中  multipleSelection: [],-->
<!--                    detailSQL选中 detailMultipleSelection: [],-->
<!--                    主界面元件List mainElement: [],-->
<!--                    左界面元件 leftElement: [],-->
<!--                    右界面元件 rightElement: [],-->
<!--                    cardView元件 cardViewElement: [],-->
                </div>

                <!-- end 上一步/下一步 -->
                <div style="align-content: center">
                    <el-button style="margin-top: 20px;" @click="back">上一步</el-button>
                    <el-button style="margin-top: 20px;" @click="next" type="success" v-if="active != 5">下一步</el-button>
                    <el-button style="margin-top: 20px;" @click="next" type="success" v-if="active === 5">生成代码</el-button>
                </div>
            </el-col>
            <el-col :span="5">
            </el-col>
        </el-row>

        <!-- 主实体字段选择模态框 -->
        <el-dialog title="选择主实体字段" :visible.sync="dialogTableVisible">
            <span>
                <el-table
                        :data="mainSQlList"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="55"/>
                  <el-table-column property="nameEn" label="字段名" width="150"/>
                  <el-table-column property="type" label="字段类型" width="200"/>
                  <el-table-column property="nameCn" label="注释"/>
                </el-table>
            </span>

            <span slot="footer" class="dialog-footer">
                <el-button @click="mainSqlCancel">取 消</el-button>
                <el-button type="primary" @click="mainSqlConfirm">确 定</el-button>
            </span>
        </el-dialog>

        <!-- detail实体字段选择模态框 -->
        <el-dialog title="选择CardView实体字段" :visible.sync="detailDialogTableVisible">
            <span>
                <el-table
                        :data="detailSQlList"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="detailHandleSelectionChange">
                  <el-table-column type="selection" width="55"/>
                  <el-table-column property="nameEn" label="字段名" width="150"/>
                  <el-table-column property="type" label="字段类型" width="200"/>
                  <el-table-column property="nameCn" label="注释"/>
                </el-table>
            </span>

            <span slot="footer" class="dialog-footer">
                <el-button @click="detailSqlCancel">取 消</el-button>
                <el-button type="primary" @click="detailSqlConfirm">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 添加页面控件模态框 -->
        <el-dialog title="添加页面控件" :visible.sync="newElementDialogTableVisible" :before-close="addElementCancel">
            <span>
                <el-form ref="localNewElement" :model="localNewElement" label-width="80px">
                    <!-- 控件名称/控件注释 -->
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="控件名称:">
                                <el-input v-model="localNewElement.elementName" placeholder="请输入控件名称(英文小驼峰)" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="控件注释:" >
                                <el-input v-model="localNewElement.elementComment" placeholder="请输入控件注释" />
                            </el-form-item>
                        </el-col>
                        <!-- 左右双页面时 -->
                        <el-col :span="8" v-if="filter.pageType === '2' && this.active != 4">
                            <el-form-item label="添加到:" >
                                <el-select v-model="localNewElement.elementParent" placeholder="请选择控件父页面">
                                  <el-option :label="filter.leftProjectName" value="左" ></el-option>
                                  <el-option :label="filter.rightProjectName" value="右" ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- 控件名称/控件注释 -->
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="控件类型:">
                                <el-select v-model="localNewElement.elementType" placeholder="请选择控件类型">
                                  <el-option label="文字+显示文字" value="显示文字"></el-option>
                                  <el-option v-if="this.active != 4" label="输入框(可加文字,加图片)" value="输入框"></el-option>
                                  <el-option v-if="this.active != 4" label="文字+下拉框" value="下拉框"></el-option>
                                  <el-option label="按钮" value="按钮"></el-option>
                                  <el-option v-if="this.active != 4" label="勾选框" value="勾选框"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="数据类型:">
                                <el-select v-model="localNewElement.elementDataType" placeholder="请选择数据类型">
                                  <el-option label="Integer" value="1"></el-option>
                                  <el-option label="String" value="2"></el-option>
                                  <el-option label="Data" value="3"></el-option>
                                  <el-option label="Boolean" value="4"></el-option>
                                  <el-option v-if="this.active != 4" label="List<IKeyAndValue>" value="5"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="优先级:">
                                <el-select v-model="localNewElement.elementP" placeholder="请选择控件优先级">

                                  <div v-if="filter.pageType === '1'">

                                  </div>
                                  <div v-if="filter.pageType === '2'">

                                  </div>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <!-- 1.文字+显示文字 -->
                            <el-form-item label="文字内容:" v-if="localNewElement.elementType === '显示文字'">
                                <el-input v-model="localNewElement.label" placeholder="请输入文字(一)" />
                            </el-form-item>
                            <!-- 2.输入框(可加文字,图片) -->
                            <el-form-item label="标题:" v-if="localNewElement.elementType === '输入框'">
                                <el-input v-model="localNewElement.inputTitle" placeholder="请输入输入框标题" />
                            </el-form-item>
                            <!-- 3.文字+下拉框 -->
                            <el-form-item label="标题:" v-if="localNewElement.elementType === '下拉框'">
                                <el-input v-model="localNewElement.spinnerTitle" placeholder="请输入下拉框标题" />
                            </el-form-item>
                            <!-- 4.按钮 -->
                            <el-form-item label="按钮名称:" v-if="localNewElement.elementType === '按钮'">
                                <el-input v-model="localNewElement.buttonText" placeholder="请输入按钮名称" />
                            </el-form-item>
                            <!-- 5.勾选框 -->
                            <el-form-item label="提示文字:" v-if="localNewElement.elementType === '勾选框'">
                                <el-input v-model="localNewElement.checkBoxText" placeholder="请输入勾选框提示文字" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <!-- 1.文字+显示文字 1 -->
                            <el-form-item label="数据实体:" v-if="localNewElement.elementType === '显示文字'">
                                <el-select v-model="localNewElement.labelEntity" placeholder="请选择数据来源实体">
                                  <el-option v-if="filter.mainEntityClassName != ''" :label=filter.mainEntityClassName :value="1" ></el-option>
                                  <el-option v-if="filter.detailEntityClassName != ''" :label=filter.detailEntityClassName :value="2" ></el-option>
                                </el-select>
                            </el-form-item>
                            <!-- 2.输入框(可加文字,图片) -->
                            <el-form-item label="图片:" v-if="localNewElement.elementType === '输入框'">
                                <el-select v-model="localNewElement.inputPic" placeholder="请选择输入框图片">
                                  <el-option label="无图片" value="0" ></el-option>
                                  <el-option label="图片一" value="1" ></el-option>
                                  <el-option label="图片二" value="2" ></el-option>
                                  <el-option label="图片三" value="3" ></el-option>
                                  <el-option label="图片四" value="4" ></el-option>
                                  <el-option label="图片五" value="5" ></el-option>
                                  <el-option label="图片六" value="6" ></el-option>
                                </el-select>
                            </el-form-item>
                            <!-- 3.文字+下拉框 -->
                            <el-form-item label="图片:" v-if="localNewElement.elementType === '下拉框'">
                                <el-select v-model="localNewElement.spinnerPic" placeholder="请选择下拉框图片">
                                  <el-option label="无图片" value="0" ></el-option>
                                  <el-option label="图片一" value="1" ></el-option>
                                  <el-option label="图片二" value="2" ></el-option>
                                  <el-option label="图片三" value="3" ></el-option>
                                  <el-option label="图片四" value="4" ></el-option>
                                  <el-option label="图片五" value="5" ></el-option>
                                  <el-option label="图片六" value="6" ></el-option>
                                </el-select>
                            </el-form-item>
                            <!-- 4.按钮 -->
                            <el-form-item label="按钮风格:" v-if="localNewElement.elementType === '按钮'">
                                <el-select v-model="localNewElement.buttonStyle" placeholder="请选择按钮风格">
                                  <el-option label="蓝色" value="0" ></el-option>
                                  <el-option label="白色" value="1" ></el-option>
                                  <el-option label="红色" value="2" ></el-option>
                                  <el-option label="沉底蓝色" value="3" ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <!-- 1.文字+显示文字 1 -->
                            <el-form-item label="数据来源:" v-if="localNewElement.elementType === '显示文字'">
                                <el-select v-model="localNewElement.labelSource" placeholder="请选择数据来源">
                                    <!-- 主实体 -->
                                    <div v-if="localNewElement.labelEntity === '1'" >
                                        <div v-for="element in filter.multipleSelection" :key=element.num>
                                            <el-option :label=element.nameEn :value=element ></el-option>
                                        </div>
                                    </div>
                                    <!-- detail实体 -->
                                    <div v-if="localNewElement.labelEntity === '2'">
                                        <div v-for="element in filter.detailMultipleSelection" :key="element.num">
                                            <el-option :label=element.nameEn :value=element ></el-option>
                                        </div>
                                    </div>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                </el-form>
            </span>

            <span slot="footer" class="dialog-footer">
                    <el-button @click="addElementCancel">取 消</el-button>
                <el-button type="primary" @click="addElementConfirm">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 添加颜色绑定状态模态框 -->
        <el-dialog title="绑定颜色对应状态" :visible.sync="colorStatusDialogTableVisible">
            <span>
                <el-form ref="localColorStyle" :model="localColorStyle" label-width="80px">
                    <!-- 控件名称/控件注释 -->
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="状态value:">
                                <el-input v-model="localColorStyle.value" placeholder="请输入状态值" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="颜色:" >
                                <el-select v-model="localColorStyle.color" placeholder="请选择颜色">
                                  <el-option label="灰色(基本)" value="grey" />
                                  <el-option label="红色(紧急)" value="red" />
                                  <el-option label="黄色(一般紧急)" value="yellow" />
                                  <el-option label="绿色(普通)" value="green" />
                                  <el-option label="蓝色(普通)" value="blue" />
                                  <el-option label="黑色" value="black" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </span>

            <span slot="footer" class="dialog-footer">
                    <el-button @click="addStyleColortCancel">取 消</el-button>
                <el-button type="primary" @click="addStyleColortConfirm">绑定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>

  import {apiDefaultErrorHandler} from "../../api/base";
  import androidApi from "../../api/operation/android";

  export default {
    name: "android",

    data() {
      return {
        filter: {
          // 项目路径
          path: '',
          // 项目(类)名称
          ClassName: '',
          // 功能中文名称
          projectName: '',
          // 页面类型 1 单页面, 2 左右双页面
          pageType: '2',
          // 双页面情况下 左右页面中文名称,类名称
          leftProjectName: '',
          rightProjectName: '',
          leftClassName: '',
          rightClassName: '',
          // 包含列表
          isCardView: false,
          // 列表list 显示的组件
          cardViewShowList: {},
          // 列表父页面类名
          cardViewParentClassName: '',
          // 接收传值
          isBoundle: false,
          // 扫描功能
          isScan: false,
          // 扫描类型
          scanType: [],
          // 主实体类型
          mainEntityType: '',
          // 主实体类名
          mainEntityClassName: '',
          // 主SQL选中
          multipleSelection: [],
          // detail实体类型
          detailEntityType: '',
          // detail实体类名
          detailEntityClassName: '',
          // detailSQL选中
          detailMultipleSelection: [],
          // 主界面元件List/左界面元件/右界面元件
          mainElement: [],
          leftElement: [],
          rightElement: [],
          // cardView元件
          cardViewElement: [],
          // cardView是否用颜色区别状态
          statusColor: false,
          // 状态相关
          status: {
            statusEntity: '',
            statusField: {},
            statusTypeAndColor: [],
          },
        },
        // 流程进度
        active: 0,
        // 主实体sql语句
        mainSQLText: '',
        // detail实体sql语句
        detailSQLText: '',
        // 主实体sql拆分后数据
        mainSQlList: [],
        // detailsql拆分后数据
        detailSQlList: [],
        // 主实体字段选择模态框显示
        dialogTableVisible: false,
        // detail实体字段选择模态框显示
        detailDialogTableVisible: false,
        // 主sql选中个数
        multipleSelectionNum: 0,
        // detailsql选中个数
        detailMultipleSelectionNum: 0,
        // 本地缓存控件信息
        localNewElement: {
          // 控件名称
            elementName: '',
          // 控件注释
            elementComment: '',
          // 控件所在页面
          elementParent: '',
          // 控件类型  文字+显示文字 1, 输入框(可加文字,加图片) 2, 文字+下拉框 3, 按钮 4, 勾选框 5,
            elementType: '',
          // 数据类型 Integer 1, String 2, Data 3, Boolean 4, List<IKeyAndValue> 5,
            elementDataType: '',
          // 优先级
            elementP: '',
          // ### 文字+显示文字 1 label
          // 文字显示内容
            label: '',
          // 显示文字数据来源实体
            labelEntity: '',
          // 显示文字数据来源 存放nameCn nameEn type
            labelSource: {},
          // 输入框标题
          inputTitle: '',
          // 输入框图片
          inputPic: '',
          // 下拉框标题
          spinnerTitle: '',
          // 下拉框图片
          spinnerPic: '',
          // 按钮名称
          buttonText: '',
          // 按钮风格
          buttonStyle: '',
          // 勾选框提示文字
          checkBoxText: '',
        },
        // 新建element模态框显示
        newElementDialogTableVisible: false,
        // editFlag 存储修改的数据索引
        editFlagIndex: -1,
        // 颜色状态模态框显示
        colorStatusDialogTableVisible: false,
        // 本地颜色与状态
        localColorStyle: {
          value: '',
          color: '',
        }
      };
    },

    methods: {
      // 下一步 0为索引,实指页面步骤1
      next() {
        // 0--1
        if (this.active === 0) {
          if (this.filter.path != "") {
            this.active = 1;
          } else {
            this.$message({
              message: '路径输入为空,无法进入下一步!',
              type: 'warning'
            });
          }
        }
        // 1---2
        else if (this.active === 1) {
          if (this.filter.ClassName != "" && this.filter.projectName != "" && this.filter.pageType != "") {
            if (this.filter.pageType === "2") {
              if (this.filter.leftClassName === "" || this.filter.leftProjectName === "" || this.filter.rightClassName === "" || this.filter.rightProjectName === "") {
                this.$message({
                  message: '双页面必填数据为空,无法进入下一步!',
                  type: 'warning'
                });
                return;
              }
            }
            if (this.filter.isCardView) {
              if (this.filter.cardViewParentClassName === "") {
                this.$message({
                  message: '列表所在页面为空,无法进入下一步!',
                  type: 'warning'
                });
                return;
              }
            }
            if (this.filter.isScan) {
              if (this.filter.scanType.length === 0) {
                this.$message({
                  message: '扫描类型列表为空,无法进入下一步!',
                  type: 'warning'
                });
                return;
              }
            }
            this.active = 2;
          } else {
            this.$message({
              message: '类名称/功能名称/页面类型为空,无法进入下一步!',
              type: 'warning'
            });
          }
        }
        // 2---3
        else if (this.active === 2) {
          // 判断主实体
          if (this.filter.mainEntityType != "页面无实体") {
            if (this.filter.mainEntityClassName === '') {
              this.$message({
                message: '请输入主实体名称!',
                type: 'warning',
              });
              return;
            }
            if (this.filter.mainEntityType === '已存在实体DTO' || this.filter.mainEntityType === '已存在实体Entity') {
              this.active = 3;
            } else {
              if (this.multipleSelectionNum === 0) {
                this.$message({
                  message: '未在主实体中添加变量!',
                  type: 'warning'
                });
                return;
              }
            }
          }
          // 包含CardView时
          if (this.filter.isCardView) {
            if (this.filter.detailEntityType != '页面无实体') {
              // detail实体名称空
              if (this.filter.detailEntityClassName === '') {
                this.$message({
                  message: '请输入CardView实体名称!',
                  type: 'warning'
                });
                return;
              }
              if (this.filter.detailEntityType === '已存在实体DTO' || this.filter.detailEntityType === '已存在实体Entity') {
                this.active = 3;
              } else {
                // detail实体list空
                if (this.detailMultipleSelectionNum === 0) {
                  this.$message({
                    message: '未在detail实体中添加变量!',
                    type: 'warning'
                  });
                  return;
                }
              }
            }
          }
          this.active = 3;
        }
        // 3---4
        else if (this.active === 3) {
          if(this.filter.mainElement.length === 0){
            this.$confirm('你未在页面添加组件,将创建一个空白界面', '提示', {
              confirmButtonText: '好啊',
              cancelButtonText: '我不',
              type: 'warning'
            }).then(() => {
              this.active = 4;
            });
          } else {
            this.active = 4;
          }
        }
        // 4---5
        else if (this.active === 4) {
            this.active = 5;
        }
        // 5---6 生成代码
        else if (this.active === 5) {
          this.makeCode();
        }
      },

      // 生成代码
      makeCode() {
        androidApi.makeCode(this.filter).then(({data}) => {
          if (this.$http.isResponseSuccess(data)) {
            this.$message('好久不见,恭喜发财');
          } else {
            apiDefaultErrorHandler(data)
          }
          this.dataListLoading = false
        }).catch((ex) => {
          apiDefaultErrorHandler(ex)
          this.dataListLoading = false
        })
      },

      // 上一步
      back() {
        // 6之前可以回退上一步
        if (this.active > 0 && this.active < 6) {
          this.active--;
        }
      },

      // 解析主SQL
      readMainSQL() {
        this.mainSQlList = [];
        if (this.mainSQLText === '') {
          this.$message({
            message: 'SQL为空,无法解析!',
            type: 'warning'
          });
          return;
        }
        var arr = this.mainSQLText.split(",\n")
        console.log("去空前:");
        console.log(arr);
        arr = this.deleteNull(arr);
        console.log("去空后:");
        console.log(arr);
        for (var i = 0; i < arr.length; i++) {
          var object = {};
          console.log("单个Str");
          console.log(arr[i]);
          var pice = arr[i].split(" ");
          console.log("单个Str分割后:");
          console.log(pice);
          pice = this.deleteNull(pice);
          console.log("单个Str分割去空后:");
          console.log(pice);
          object['nameEn'] = pice[0].substring(1, pice[0].length - 1);
          object['type'] = pice[1].toString().toLowerCase();
          var l = pice.length;
          console.log("长度:" + l);
          object['nameCn'] = pice[l - 1].substring(1, pice[l - 1].length - 1);
          this.mainSQlList.push(object);
        }
        this.dialogTableVisible = true;
      },

      // 解析detailSQL
      readDetailSQL() {
        this.detailSQlList = [];
        if (this.detailSQLText === '') {
          this.$message({
            message: 'SQL为空,无法解析!',
            type: 'warning'
          });
          return;
        }
        var arr = this.detailSQLText.split(",\n")
        console.log("去空前:");
        console.log(arr);
        arr = this.deleteNull(arr);
        console.log("去空后:");
        console.log(arr);
        for (var i = 0; i < arr.length; i++) {
          var object = {};
          console.log("单个Str");
          console.log(arr[i]);
          var pice = arr[i].split(" ");
          console.log("单个Str分割后:");
          console.log(pice);
          pice = this.deleteNull(pice);
          console.log("单个Str分割去空后:");
          console.log(pice);
          object['nameEn'] = pice[0].substring(1, pice[0].length - 1);
          object['type'] = pice[1].toString().toLowerCase();
          var l = pice.length;
          console.log("长度:" + l);
          object['nameCn'] = pice[l - 1].substring(1, pice[l - 1].length - 1);
          this.detailSQlList.push(object);
        }
        this.detailDialogTableVisible = true;
      },

      // 数组去空/去换行
      deleteNull(arry) {
        var arr = [];
        for (var i = 0; i < arry.length; i++) {
          if (arry[i] != "" && arry[i] != "\n") {
            arr.push(arry[i]);
          }
        }
        return arr;
      },

      /**
       * 主SQL相关
       * @param val
       */
      // 主SQL选择
      handleSelectionChange(val) {
        this.filter.multipleSelection = val;
        console.log("已选择:")
        console.log(this.filter.multipleSelection);
      },

      // 主SQL模态框确认
      mainSqlConfirm() {
        this.dialogTableVisible = false;
        this.multipleSelectionNum = this.filter.multipleSelection.length;
      },

      // 主SQL模态框取消
      mainSqlCancel() {
        this.dialogTableVisible = false
        this.filter.multipleSelection = [];
        this.multipleSelectionNum = this.filter.multipleSelection.length;
      },

      // 主SQL输入区域清空
      mainSqlTextClear() {
        this.filter.multipleSelection = [];
        this.mainSQLText = '';
        this.multipleSelectionNum = this.filter.multipleSelection.length;
      },

      /**
       * detailSQL相关
       * @param val
       */
      // detailSQL选择
      detailHandleSelectionChange(val) {
        this.filter.detailMultipleSelection = val;
        console.log("已选择:")
        console.log(this.filter.detailMultipleSelection);
      },

      // detailSQL模态框确认
      detailSqlConfirm() {
        this.detailDialogTableVisible = false;
        this.detailMultipleSelectionNum = this.filter.detailMultipleSelection.length;
      },

      // detailSQL模态框取消
      detailSqlCancel() {
        this.detailDialogTableVisible = false
        this.filter.detailMultipleSelection = [];
        this.detailMultipleSelectionNum = this.filter.detailMultipleSelection.length;
      },

      // 主SQL输入区域清空
      detailSqlTextClear() {
        this.filter.detailMultipleSelection = [];
        this.detailSQLText = '';
        this.detailMultipleSelectionNum = this.filter.detailMultipleSelection.length;
      },

      // 打开新增控件模态框
      newElement() {
        this.newElementDialogTableVisible = true;
      },

      // 取消新增控件
      addElementCancel() {
        this.newElementDialogTableVisible = false;
        this.localNewElement = {};
      },

      // 新增控件
      addElementConfirm() {
        // 控件名称校验
        if(this.localNewElement.elementName === ''){
          this.$message({
            message: '控件名称为空,无法进入下一步!',
            type: 'warning'
          });
          return;
        }
        // 控件注释校验
        if(this.localNewElement.elementComment === ''){
          this.$message({
            message: '控件注释为空,为了你的代码清晰,最好输入注释哦!',
            type: 'warning'
          });
          return;
        }
        // 控件所在页面校验
        if(this.localNewElement.elementParent === '' && this.filter.pageType === '2' && this.active != 4){
          this.$message({
            message: '请选择控件所在页面',
            type: 'warning'
          });
          return;
        }
        // 控件类型校验
        if(this.localNewElement.elementType === ''){
          this.$message({
            message: '控件类型为空,无法进入下一步!',
            type: 'warning'
          });
          return;
        }
        // 控件数据类型校验
        if(this.localNewElement.elementDataType === ''){
          this.$message({
            message: '控件数据类型为空,无法进入下一步!',
            type: 'warning'
          });
          return;
        }
        // label校验
        if(this.localNewElement.elementType === '显示文字' ){
          if(this.localNewElement.label === '' || this.localNewElement.labelEntity === '' || this.localNewElement.labelSource === ''){
            this.$message({
              message: 'label配置信息缺失,无法进入下一步!',
              type: 'warning'
            });
            return;
          }
        }
        // input校验
        if(this.localNewElement.elementType === '输入框' ){
          if(this.localNewElement.inputTitle === '' || this.localNewElement.inputPic === ''){
            this.$message({
              message: 'input配置信息缺失,无法进入下一步!',
              type: 'warning'
            });
            return;
          }
        }
        // spainner校验
        if(this.localNewElement.elementType === '下拉框' ){
          if(this.localNewElement.spinnerTitle === '' || this.localNewElement.spinnerPic === ''){
            this.$message({
              message: 'spinner配置信息缺失,无法进入下一步!',
              type: 'warning'
            });
            return;
          }
        }
        // button校验
        if(this.localNewElement.elementType === '按钮' ){
          if(this.localNewElement.buttonText === '' || this.localNewElement.buttonStyle === ''){
            this.$message({
              message: 'button配置信息缺失,无法进入下一步!',
              type: 'warning'
            });
            return;
          }
        }
        // checkBox校验
        if(this.localNewElement.elementType === '勾选框' ){
          if(this.localNewElement.checkBoxText === ''){
            this.$message({
              message: 'checkBox配置信息缺失,无法进入下一步!',
              type: 'warning'
            });
            return;
          }
        }
        // 如果是修改,先删除原来数据
        var resStr = '';
        if(this.editFlagIndex >= 0){
          if(this.active != 4){
            if(this.filter.pageType === "1"){
              this.filter.mainElement.splice(this.editFlagIndex, 1);
            } else {
              if(this.localNewElement.elementParent === "左"){
                this.filter.leftElement.splice(this.editFlagIndex, 1);
              } else {
                this.filter.rightElement.splice(this.editFlagIndex, 1);
              }
            }
          } else {
            this.filter.cardViewElement.splice(this.editFlagIndex, 1);
          }
          resStr = '修改成功!';
          console.log('删除原数据后的mainElement:');
          console.log(this.filter.mainElement);
        } else {
          resStr = '添加成功!';
        }
        if(this.active != 4){
          if(this.filter.pageType === "1"){
            this.filter.mainElement.push(this.localNewElement);
          } else {
            if(this.localNewElement.elementParent === "左"){
              this.filter.leftElement.push(this.localNewElement);
            } else {
              this.filter.rightElement.push(this.localNewElement);
            }
          }
        } else {
          this.filter.cardViewElement.push(this.localNewElement);
        }
        this.localNewElement = {};
        this.newElementDialogTableVisible = false;
        this.editFlagIndex = -1;
        this.$message({
          message: resStr,
          type: 'success'
        });

      },

      // 删除控件
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      // 编辑控件
      editRow(index, element) {
        this.editFlagIndex = index;
        console.log('index:' + index);
        this.localNewElement = element[index];
        this.newElementDialogTableVisible = true;
      },

      // 打开颜色状态模态框
      newColorStyle () {
        this.colorStatusDialogTableVisible = true;
      },

      // 添加颜色绑定状态
      addStyleColortConfirm() {
        if(this.localColorStyle.value === '' || this.localColorStyle.color === ''){
          this.$message({
            message: 'value/color输入为空,无法添加!',
            type: 'warning'
          });
          return;
        }
        this.filter.status.statusTypeAndColor.push(this.localColorStyle);
        this.localColorStyle = {};
        this.colorStatusDialogTableVisible = false;
      },
      // 取消添加颜色绑定状态
      addStyleColortCancel() {
        this.localColorStyle = {};
        this.colorStatusDialogTableVisible = false;
      }
    }
  }
</script>

<style scoped>

</style>